<template>
  <view class="category">
    <scroll-view scroll-y="true" class="left-category">
      <view
        class="left-category-item"
        :class="{ active: item.id === categoryId }"
        v-for="item in categorys"
        :key="item.id"
        @click="changeCategory(item)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view scroll-y="true" class="right-category">
      <view class="right-category-item" v-for="item in navList" :key="item.id">
        <view class="title">{{ item.name }}</view>
        <view class="nav-list">
          <view
            class="nav-list-item"
            :class="{ active: currentId === child.id }"
            v-for="child in item.children"
            :key="child.id"
            @click="pageJump(child)"
          >
            {{ child.name }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      categoryId: null,
      categorys: [],
      currentId: null
    }
  },
  computed: {
    navList() {
      const selectedCategory = this.categorys.find(
        (category) => category.id === this.categoryId
      )
      return selectedCategory?.children || []
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.init(newVal)
      },
      immediate: true
    }
  },
  methods: {
    init(list) {
      this.categorys = list.filter((item) => item.pid === null)

      if (this.categorys.length > 0) {
        this.changeCategory(this.categorys[0])
      }
    },
    changeCategory(item) {
      this.categoryId = item.id
      this.currentId = null
    },
    pageJump(item) {
      this.currentId = item.id
      if (!item.path) return
	  uni.navigateTo({
	  	url:item.path
	  })
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  display: flex;
  gap: 32rpx;
  height: 100%;

  .left-category {
    width: 206rpx;
    height: 100%;
    background: #f2f3f5;

    .left-category-item {
      display: flex;
      align-items: center;
      height: 80rpx;
      padding: 16rpx 40rpx 8rpx;
      box-sizing: initial;
      font-size: 32rpx;
      color: #1d2129;
      transition: all 0.15s ease-in;

      &.active {
        font-weight: 500;
        color: #0052d9;
        background: #fff;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          width: 8rpx;
          height: 48rpx;
          border-radius: 4rpx;
          transform: translate(0, -50%);
          background-color: #0052d9;
        }
      }
    }
  }

  .right-category {
    height: 100%;

    .right-category-item {
      margin-bottom: 64rpx;

      .title {
        margin-bottom: 24rpx;
        font-size: 32rpx;
        font-weight: 500;
      }

      .nav-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16rpx;
        margin-right: 32rpx;

        .nav-list-item {
          min-height: 88rpx;
          padding: 22rpx 16rpx;
          font-size: 28rpx;
          background-color: #f2f3f5;
          border-radius: 6rpx;
          color: #4e5969;

          &.active {
            font-weight: 500;
            background-color: #d9e1ff;
            color: #0052d9;
          }
        }
      }
    }
  }
}
</style>
